<template>
  <el-dialog
    v-model="store.isVisible"
    :title="store.title()"
    width="600px"
    @close="store.hide()"
  >
    <el-card style="max-height: 50vh; overflow-y: auto;">
      <p style="white-space: pre-wrap; word-wrap: break-word;">{{ store.message() }}</p>
    </el-card>

    <template #footer>
      <el-button type="primary" @click="store.hide()">
        {{ t('OK') }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { useInfoDialogStore } from '@/stores/infoDialog'
import { useLanguageStore } from '@/stores/language'

const store = useInfoDialogStore()
const languageStore = useLanguageStore()

// 翻译函数
const t = (key) => {
  const translations = {
    'OK': {
      'en': 'OK',
      'zh': '确认'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}
</script>